<template>
  <div>
    <el-image
      v-if="params.fileId"
      :src="url"
      :style="imgStyle"
    />
  </div>
</template>
<script>
  // 图片显示组件
  import { getToken } from '@/utils/auth'
  export default {
    name: 'AvueCusImg',
    props: {
      params: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        token: getToken(),
      }
    },
    computed: {
      imgStyle() {
        const styleObj = {
          maxWidth: '100%'
        }
        if (this.params.width) {
          styleObj.width = this.params.width + 'px'
        }
        if (this.params.height) {
          styleObj.height = this.params.height + 'px'
        }
        return styleObj;
      },
      url() {
        return (
          process.env.VUE_APP_BASE_API +
          `/storage-service/file/image?fileId=${this.params.fileId}&token=${this.token}`
        )
      },
    },
    watch: {
      data: {
        handler(val) {
          console.log(val, '监听data变化')
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {},
  }
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
